import { Button, Drawer, Form, Input, message, Space, Switch, Typography } from 'antd';
import type { FC } from 'react';
import { useMemo } from 'react';

import { omit } from '@szzj/utils';

import hooks from '../../hooks';
import { BasicInfoField, FunctionAccessField } from '../Fields';

import { MenuTypeEnum } from '@/types/systemManagement/menu';
import { useModel } from 'umi';

interface IProps {
  open: boolean;
  onClose?: () => void;
}

const EditDrawer: FC<IProps> = ({ open, onClose }) => {
  const { hasPermisson } = useModel('useUser', (model) => {
    return {
      hasPermisson: model.getRole,
    };
  });
  const {
    form,
    editFunctionAccessKey,
    setEditFunctionAccessKey,
    postMenuUpdateRequest,
    postMenuCreateRequest,
    editingId,
  } = hooks.useContainer();
  const currentMenuType = Form.useWatch('menuType', form) as MenuTypeEnum;

  const menuTypeLocale = useMemo(() => {
    switch (currentMenuType) {
      case MenuTypeEnum.MENU: {
        return '菜单';
      }
      case MenuTypeEnum.CAT: {
        return '目录';
      }
      case MenuTypeEnum.BTN:
      default: {
        return '';
      }
    }
  }, [currentMenuType]);
  const disabledFun = useMemo(() => {
    if (editingId) return false;
    switch (currentMenuType) {
      case MenuTypeEnum.MENU: {
        return !hasPermisson('MENU_CREATE_MENU');
      }
      case MenuTypeEnum.CAT: {
        return !hasPermisson('MENU_CREATE_CATALOG');
      }
      case MenuTypeEnum.BTN:
      default: {
        return false;
      }
    }
  }, [editingId, currentMenuType]);

  return (
    <Drawer
      destroyOnClose
      width={750}
      title={editingId ? `编辑${menuTypeLocale}` : `新增${menuTypeLocale}`}
      onClose={() => {
        onClose?.();
        setEditFunctionAccessKey(undefined);
      }}
      open={open}
      extra={
        <Space>
          <Button type="primary" disabled={disabledFun} onClick={form.submit}>
            保存
          </Button>
        </Space>
      }
    >
      <Form
        form={form}
        preserve={false}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 20 }}
        initialValues={{
          parentId: 0,
        }}
        onFinish={(vals) => {
          if (!!editFunctionAccessKey) {
            message.error('请先保存功能权限中所做的更改');
            return;
          }
          const values = omit(vals, ['parentMenuName', 'level']);
          if (editingId) {
            postMenuUpdateRequest
              .runAsync({
                ...values,
                id: Number(editingId),
              })
              .then((res) => {
                if (res) {
                  setEditFunctionAccessKey(undefined);
                  onClose?.();
                }
              });
          } else {
            postMenuCreateRequest
              .runAsync({
                ...values,
              })
              .then((res) => {
                if (res) {
                  setEditFunctionAccessKey(undefined);
                  onClose?.();
                }
              });
          }
        }}
      >
        <Typography.Title level={4}>基本信息</Typography.Title>
        <BasicInfoField />
        <Form.Item name="btnList" hidden>
          <Input />
        </Form.Item>
        <Form.Item noStyle shouldUpdate={(prev, next) => prev.menuType !== next.menuType}>
          {() =>
            form.getFieldValue('menuType') === MenuTypeEnum.MENU ? (
              <>
                <Typography.Title level={4}>功能权限</Typography.Title>
                <FunctionAccessField />
                <Typography.Title level={4} style={{ marginTop: '0.5em' }}>
                  数据权限
                </Typography.Title>
                <Form.Item
                  name="hasDataPerm"
                  label="区分数据权限"
                  labelCol={{ span: 5 }}
                  wrapperCol={{ span: 19 }}
                  valuePropName="checked"
                >
                  <Switch />
                </Form.Item>
              </>
            ) : null
          }
        </Form.Item>
      </Form>
    </Drawer>
  );
};

export default EditDrawer;
